<template>
   <div>

      <div>

         <label for="searchKeyword">关键词:</label>
         <input type="text" v-model="name" id="searchKeyword" />
         <button @click="getList">搜索</button>
      </div>

      <el-button type="text" @click="addUI">添加</el-button>
      <el-dialog title="部门添加" :visible.sync="dialogFormVisible">
         <el-form :model="form">
            <el-form-item label="姓名" :label-width="formLabelWidth">
               <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
         </el-form>

         <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submit">确 定</el-button>
         </div>
      </el-dialog>


      <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
         <el-table-column prop="id" label="编号" width="180"></el-table-column>
         <el-table-column prop="name" label="姓名" width="180"></el-table-column>

         <el-table-column label="操作">
            <template slot-scope="scope">
               <el-button type="danger" size="small" @click="del(scope.row)">删除</el-button>
               <el-button type="info" size="small" @click="update(scope.row)">修改</el-button>
            </template>

         </el-table-column>
      </el-table>



      <div class="block">
         <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
            :page-sizes="[3, 6, 9, 12]" :page-size="3" layout="total, sizes, prev, pager, next, jumper" :total="totalSum">
         </el-pagination>
      </div>

   </div>
</template>
<script>
export default {
   components: {

   },
   mixins: [],
   props: {

   },
   data() {
      return {
         name: "",
         searchResults: [],
         tableData: [],
         dialogFormVisible: false,
         form: {

         },
         formLabelWidth: '120px',
         pageNum: 1,
         pageSize: 3,
         totalSum: 0

      }
   },
   computed: {

   },
   watch: {

   },
   mounted() {
      this.getList();
   },
   methods: {
      tableRowClassName({ row, rowIndex }) {
         if (rowIndex % 2 === 1) {
            return 'warning-row';
         } else if (rowIndex % 2 === 0) {
            return 'success-row';
         }
         return '';
      },
      handleSizeChange(size) {
         this.pageSize = size
         this.getList()
      },
      handleCurrentChange(pageNum) {
         this.pageNum = pageNum
         this.getList()
      },
      getList() {
         this.$axios.get(`http://localhost:8080/dept?pageNum=${this.pageNum}&pageSize=${this.pageSize}&name=${this.name}`).then(resp => {
            this.totalSum = resp.data.data.total;
            this.tableData = resp.data.data.list;
         })
      },
      addUI() {
         this.form = {}
         this.dialogFormVisible = true
      },
      submit() {
         if (!this.form.id) {
            this.$axios.post("http://localhost:8080/dept", this.form).then(resp => {
               let resultVo = resp.data;
               if (resultVo.code == 200) {
                  this.dialogFormVisible = false
                  this.getList();
                  this.form = {};
                  this.$message({
                     type: "success",
                     message: "添加用户成功"
                  })
                  return;
               }
            })
         } else {
            this.$axios.put("http://localhost:8080/dept", this.form).then(resp => {
               let resultVo = resp.data;
               if (resultVo.code == 200) {
                  this.dialogFormVisible = false
                  this.getList();
                  this.form = {};
                  this.$message({
                     type: "success",
                     message: "修改用户成功"
                  })
                  return;
               }
            })
         }
      },
      del(row) {
         if (window.confirm("确认删除吗？")) {
            this.$axios.delete(`http://localhost:8080/dept/${row.id}`).then(resp => {
               let resultVo = resp.data;
               if (resultVo.code == 200) {
                  this.getList();
                  this.$message({
                     type: "success",
                     message: "删除成功！"
                  })
                  return;
               }
               this.$message({
                  type: "error",
                  message: "删除失败"
               })
            })
         }

      },
      update(row) {
         this.dialogFormVisible = true;
         this.form = row
      },
      search() {
         this.$axios.get("http://localhost:8080/dept", this.keyword).then(resp => {

            this.searchResults = resp.data.data
         })
      }

   }
};
</script>
<style lang='' scoped>
</style>
